<template>
  <div id="app" class="skSports">
    <template>
      <dash-page ref="dashPage"  @cardData="cardDataSet" v-if="dashShow"></dash-page>
    </template>
    <sk-details ref="skDetails" @cardData="cardDataSet" :dateType="dateType" :areaType="areaType" v-if="detailShow"></sk-details>
    <!-- <sk-outTime ref="skOutTime" @cardData="cardDataSet" :dateType="dateType" :areaType="areaType" v-if="outTimeShow"></sk-outTime>
    <sk-outCount ref="skOutCount" @cardData="cardDataSet" :dateType="dateType" :areaType="areaType" v-if="outCountShow"></sk-outCount> -->
  </div>
</template>
<script>
import "@/assets/less/ClassAndCard.less"
import { getAction } from '@/api/manage'
import dashPage from './sports/skDashPage'
import skDetails from './sports/skDetails'
import skOutTime from './sports/skOutTime'
import skOutCount from './sports/skOutCount'
export default {
  name: 'skCard',
  components: {
    dashPage,
    skDetails,
    skOutTime,
    skOutCount,
  },
  data() {
    return {
      url: {
        list: 'management/skStudentCheck/getStudentCheckStatistical'
      },
      dashShow: true,
      detailShow: false,
      outTimeShow: false,
      outCountShow: false,
      dateType: 'week',
      areaType: '1'
    }
  },

  filters: {},

  computed: {},

  created() {
  },

  activated() {},

  mounted() {

  },
  methods: {
    //初始化加载数据
    load() {

    },
    cardDataSet(data, dateType, areaType) {
      console.log(data);
      this.dashShow = data.show;
      if (data.show) {
        this.detailShow = false;
        // this.outTimeShow = false;
        // this.outCountShow = false;
      } else if (data.outTimeShow) {
        this.dashShow = false;
        this.detailShow = true;
        // this.outCountShow = false;
        // this.outTimeShow = true;
        this.dateType = dateType;
        this.areaType = areaType;
      } else if (data.outCountShow) {
        this.dashShow = false;
        this.detailShow = true;
        // this.outCountShow = true;
        // this.outTimeShow = false;
        this.dateType = dateType;
        this.areaType = areaType;
      }
    },
    handleActualInfo() {
      this.dashShow = false;
      this.outTimeShow = true;
      this.outCountShow = false;
      this.dateType = 'week';
    }
  }
}
</script>